<template>
  <div class="w-full h-full px-3">
    <div class="flex items-center" style="padding: 0 7px;">
      <div class="flex items-center bg-violet-50/60 rounded-lg py-0.5 px-2">
        <i class="iconfont icon-tongjibaobiao text-violet-500 text-base" />
        <span class="title font-semibold text-violet-600 ml-1.5">{{ $t('common.MonthlyData') }}</span>
      </div>
      <div class="flex-1 h-[1px] bg-gradient-to-r from-violet-200 via-violet-100/50 to-transparent ml-3"></div>
      <el-button class="summary-btn" @click="jupToNewpage">
        <el-icon class="icon-left"><Position /></el-icon>
        <span>{{ $t('summary.incomingMaterials') }}</span>
        <el-icon class="icon-position"><ArrowRight /></el-icon>
      </el-button>
    </div>
    <div class="h-5/6 py-2 flex items-center justify-around">
      <card-item v-for="item in dataList" :key="item.type" :item="item" />
    </div>
  </div>
</template>

<script setup>
import cardItem from './cardItem.vue'
import { reactive } from 'vue'
import { getReceiptInstockData } from '@/api/warehouseEntryApi'
import router from '@/router'
import useI18n from '@/hooks/language'
import { Position, ArrowRight } from '@element-plus/icons-vue'

const { t } = useI18n()

const dataList = reactive([
  {
    type: 'one',
    // bgc: 'background: rgb(255 184 119 / 28%)',
    // bgc2: 'background: #ffb75a',
    // bgc3: 'background: linear-gradient(to left, #fdf7eb, #fadbaa)',
    bgc: 'background: rgb(121 164 243 / 36%)',
    bgc2: 'background: #215aff',
    bgc3: 'background: linear-gradient(to left, #eaeefa, #9aafef)',
    title: t('common.instockQtys'),
    number: 0,
    isUp: false,
    num: 0,
    unit: '/个',
    // color: '#ffb34e',
    color: '#295fff',
    iconfont: 'icon-wms_tiaoboshuliang'
  },
  {
    type: 'zero',
    bgc: 'background: rgb(121 164 243 / 36%)',
    bgc2: 'background: #215aff',
    bgc3: 'background: linear-gradient(to left, #eaeefa, #9aafef)',
    title: t('common.receiptMatQty'),
    number: 0,
    isUp: true,
    num: 0,
    color: '#295fff',
    color1: '#9aafef',
    iconfont: 'icon-shishikucunshiyitu'
  },

  {
    type: 'tow',
    // bgc: 'background: rgb(84 239 202 / 32%)',
    // bgc2: 'background: #37d6b4',
    // bgc3: 'background: linear-gradient(to left, #f3fffc, #97efdf)',
    bgc: 'background: rgb(255 184 119 / 28%)',
    bgc2: 'background: #ffb75a',
    bgc3: 'background: linear-gradient(to left, #fdf7eb, #fadbaa)',
    title: t('common.receiptNum'),
    number: 0,
    isUp: true,
    num: 0,
    // unit: '/个',
    // color: '#29d2b0',
    // color1: '#97efdf',
    color: '#ffb34e',
    iconfont: 'icon-tiaobolishi'

  },
  {
    type: 'three',
    // bgc: 'background: rgb(84 177 239 / 32%)',
    // bgc2: 'background: #18a5f3',
    // bgc3: 'background: linear-gradient(to left, #e4eef8, #64b9ec)',
    bgc: 'background: rgb(255 184 119 / 28%)',
    bgc2: 'background: #ffb75a',
    bgc3: 'background: linear-gradient(to left, #fdf7eb, #fadbaa)',
    title: t('common.instockNum'),
    number: 0,
    isUp: true,
    num: 0,
    // unit: '/个',
    // color: '#36a8ec',
    // color1: '#e4eef8',
    color: '#ffb34e',
    iconfont: 'icon-kucunliang1'

  },
  {
    type: 'four',
    // bgc: 'background: rgb(242 130 148 / 33%)',
    // bgc2: 'background: #ff5670',
    // bgc3: 'background: linear-gradient(to left, #fbf2f4,#f69dac)',
    bgc: 'background: rgb(179 131 239 / 29%)',
    bgc2: 'background: #8d4eda',
    bgc3: 'background: linear-gradient(to left, #f0e9f8, #cbafea)',
    title: t('common.stepOutQtys'),
    number: 0,
    isUp: false,
    num: 0,
    unit: '',
    // color: '#ff506c',
    color: '#8d4eda',
    iconfont: 'icon-tiaobochuku'
  },
  {
    type: 'five',
    bgc: 'background: rgb(179 131 239 / 29%)',
    bgc2: 'background: #8d4eda',
    bgc3: 'background: linear-gradient(to left, #f0e9f8, #cbafea)',
    title: t('common.stepInQtys'),
    number: 0,
    isUp: false,
    num: 0,
    unit: '',
    color: '#8d4eda',
    iconfont: 'icon-tiaoboruku'
  },
])

const getNumObj = async () => {

  try {
    const { data } = await getReceiptInstockData()
    const mapping = {
      zero: data.receiptMatQty,
      one: data.instockQtys,
      tow: data.receiptNum,
      three: data.instockNum,
      four: data.stepOutQtys[0],
      five: data.stepInQtys[0],
    }
    dataList.forEach(item => {
      if (item.type == 'four' || item.type == 'five') {
        item.number = mapping[item.type].qty
        item.unit = mapping[item.type].unit
      } else if (item.type == 'one') {
        item.number = mapping[item.type] || []
      } else {
        item.number = mapping[item.type] || item.number
      }

    })

  } catch (e) {
    console.log(e)
  }

}

getNumObj()

const jupToNewpage = () => {
  // 路由跳转
  router.push('/generalView');

}
</script>

<style scoped lang="scss">
.summary-btn {
  background: linear-gradient(to right, #2f6aec, #1e88e5);
  border: none;
  color: white;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(47, 106, 236, 0.2);

  .icon-left {
    font-size: 16px;
  }

  .icon-position {
    font-size: 16px;
    transition: transform 0.3s ease;
  }

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(47, 106, 236, 0.3);
    background: linear-gradient(to right, #3d7af0, #2196f3);

    .icon-position {
      transform: translateX(4px);
    }
  }
}
</style>
